"use client";
import Title from "antd/es/typography/Title";
import {Divider, Flex, message} from "antd";
import Link from "next/link";
import {getQuestionBankVoByPageUsingPost} from "@/api/questionBankController";
import QuestionBankList from "@/components/QuestionBankList";
import QuestionList from "@/components/QuestionList";
import {getQuestionSimpleVoByPageUsingPost} from "@/api/questionController";
import "./globals.css";
import React, {useCallback, useEffect, useState} from "react";

// 本页面使用服务端渲染，禁用静态生成
// export const dynamic = "force-dynamic";

/**
 * 主页
 */
const HomePage: React.FC = () => {
    // 使用状态管理题库和题目列表
    const [questionBankList, setQuestionBankList] = useState<API.QuestionBankVO[]>([]);
    const [questionList, setQuestionList] = useState<API.QuestionVO[]>([]);

    // 初始化页面数据
    const doInitPage = useCallback(async () => {
        try {
            // 获取题库数据
            const resBank = await getQuestionBankVoByPageUsingPost({
                pageSize: 12,
                sortField: "createTime",
                sortOrder: "descend",
            } as any);
            setQuestionBankList(resBank.data.records?? []);
        } catch (error) {
            message.error("获取题库列表失败：" + (error as Error).message);
        }

        try {
            // 获取题目数据
            const res = await getQuestionSimpleVoByPageUsingPost({
                pageSize: 12,
                sortField: "createTime",
                sortOrder: "descend",
            } as any);
            setQuestionList(res.data.records?? []);
        } catch (error) {
            message.error("获取题目列表失败：" + (error as Error).message);
        }
    }, []);

    useEffect(() => {
        doInitPage();
    }, [doInitPage]);

    return (
        <div id="homePage" className="max-width-content">
            {/* 最新题库 */}
            <Flex justify="space-between" align="center">
                <Title level={3}>最新题库</Title>
                <Link href={"/banks"}>查看更多</Link>
            </Flex>
            <QuestionBankList questionBankList={questionBankList} />
            <Divider />

            {/* 最新题目 */}
            <Flex justify="space-between" align="center">
                <Title level={3}>最新题目</Title>
            </Flex>
            <QuestionList questionList={questionList} />
        </div>
    );
};

export default HomePage;
